import React, { VFC, useEffect, useState} from "react";
import { Form, Input, Button, Upload, message,Radio, InputNumber, Modal } from 'antd';

import { FILe_URL } from "@tools/config";
import { uploadPic, editMember, saveMember} from '@services/index';
import {checkUploadFile, pick, limitNumber, limitNumberValType} from '@tools/utils';
import { GetDIC } from '@api/index'

import MySelect from './mySelect';

const FormItem = Form.Item;

type PropsType = {
    dataInfo?:any[]|null
    groupAllList?:any[]|null
    onCancel:() => void
    isVisible:boolean
}
const InputNumberType = {
    style:{width:'90%'},
    formatter:(e:limitNumberValType)=>limitNumber(e),
    parser:(e:limitNumberValType) => limitNumber(e)
}
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};

const Edit = (props:PropsType) => {
    const initFormInfo = {
        name:undefined,
        sex: '0',
        age:undefined,
        teamId:undefined,
        headPic:undefined
    }
    const {dataInfo, isVisible, onCancel} = props;
    const [formInfo, setFormInfo] = useState<any>(initFormInfo);
    const DIC_sexType = GetDIC('sexType');
    useEffect(()=>{
        if(dataInfo) setFormInfo(dataInfo)
    }, []);

    // 图片上传前校验
    const beforeUpload = (file:any) => {
        if(checkUploadFile(file, 'image')){_uploadPic(file);}
    }
    // 上传图片
    const _uploadPic = async (e: string | Blob) => {
        const formData = new FormData();
        formData.append("file", e);
        const params = {
            subject: 'sys',
            type: 'head',
            isNewFileName: 1
        };
        const { data, status } = await uploadPic(params, formData)
        if(status == '0'){
            const {fileName} = data;
            setFormInfo({
                ...formInfo,
                headPic: fileName
            })
        }
    }
    // 修改输入框值
    const onChange = (e:any, type:string) => {
        setFormInfo({
            ...formInfo,
            [type]: e?.target?e.target.value:e
        })
    }
    // 提交表单数据
    const submit = async () => {
        const params = pick(formInfo, [
            "id",
            "name",
            "sex",
            "age",
            "teamId",
            "headPic",
        ]);
        if(!params.name){
            message.error('请输入组员姓名');
            return
        }
        const method = formInfo.id ? editMember: saveMember
        const { status } = await method(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }
    };
    
    return (
        <Modal visible={isVisible}  title={dataInfo?"编辑":"添加"} onCancel={onCancel} footer={false}>
            <Form {...layout}>
                <FormItem label="姓名">
                    <Input value={formInfo.name} onChange={e => onChange(e, 'name')} placeholder="请输入小组名称"/>
                </FormItem>
                <FormItem label="性别">
                    <Radio.Group onChange={ e => onChange(e, 'sex')} value={formInfo.sex}>
                        {Object.keys(DIC_sexType).map(key => {
                            return <Radio  value={key}>{DIC_sexType[key]}</Radio>
                        })
                        }
                    </Radio.Group>
                </FormItem>
                <FormItem label="年龄">
                    <InputNumber placeholder="请输入" {...InputNumberType} value={formInfo.age} onChange={e => onChange(e, 'age')}/>
                </FormItem>
                <FormItem label="所属小组">
                    <MySelect selectValue={formInfo.teamId} onChange={e => onChange(e, 'teamId')} />
                </FormItem>
                <FormItem label="头像">
                    <Upload name="headPic"
                    listType="picture-card"
                    className="avatar-uploader-pic"
                    showUploadList={false}
                    beforeUpload={beforeUpload}
                    customRequest={()=>false}>
                        {formInfo.headPic?<img src={`${FILe_URL}${formInfo.headPic}`} />:'+'}
                    </Upload>
                </FormItem>
                <FormItem wrapperCol={{ offset: 10, span: 16 }}>
                    <Button type="primary" onClick={submit}>提交</Button>
                </FormItem>
            </Form>
        </Modal>
    )
}
export default Edit
